<template>
  <div class="login">
    <mt-header fixed  style="height:70px ;background-color: #ffffff;color: #000;" >
      <mt-button icon="back" slot="left" @click="$router.back()"><span style="font-size: 20px;padding-left: 20px">登录金筑云</span></mt-button>
    </mt-header>
    <!--<div class="lg">-->
      <!--<img src="../../assets/image/jmw_logon_logo.png" width="100" height="70">-->
    <!--</div>-->
    <div class="form">
     <div style="border: 1px solid #ffffff">
       <mt-field  placeholder="请输入手机号" type="tel" v-model="loginFrom.telPhone" :state="telMsg" @input="validTel" ></mt-field>

       <mt-field  placeholder="请输入密码" type="password" v-model="loginFrom.password" :state="passwordMsg"  @input="validPas"></mt-field>
     </div>
      <div class="tools">
        <router-link to="/editPass" style="float: left;margin-left: 20px">忘记密码?</router-link>
        <router-link to="/reg" style="float: right;margin-right: 20px">账号注册</router-link>
      </div>
      <mt-button type="primary" :disabled="disabled" size="large" @click="handleSubmit('loginFrom')" >登录</mt-button>
    </div>
  </div>
</template>
<script>
  import validate from '../../../utils/validate'
  export default {
    data () {
      return {
        telMsg:"error",
        passwordMsg:"error",
        disabled:true,
        loginFrom:{
          telPhone:'',
          password:''
        }
      }
    },
    methods: {
      handleSubmit () {
        this.$store.dispatch("login",this.loginFrom);
        this.$router.push({path:'/about'})
      },
      //校验手机号
      validTel() {
        let flg=validate.validTel(this.loginFrom.telPhone)
        if (flg){
          this.telMsg="success";
          if (this.passwordMsg=="success"){
            this.disabled=false;
          }
        } else {
          this.telMsg="error"
          this.disabled=true;
        }
      },
      //校验密码
      validPas (){
        let flg=validate.validNotEmpty(this.loginFrom.password)
        if (flg){
          this.passwordMsg="success";
          if (this.telMsg=="success"){
            this.disabled=false;
          }}else {
          this.passwordMsg="error"
          this.disabled=true;
        }
      }
    }
  }
</script>
<style lang="scss">
  @import '../../../assets/style/common';
  @import 'login';

</style>

